  <template>
  <div>
    <div class="zhibanbiao">
      <div style="display: float; margin-top: 4px">
        <p class="zhibanrenyuan">领班<span>张全蛋</span></p>
        <img
          src="..\..\assets\image\值班表-发送邮件-icon.png"
          class="icon-mail"
        />
      </div>
      <div style="clear: both"></div>
      <div style="display: float">
        <p class="zhibanrenyuan">副班<span>宋华蛋</span></p>
        <img
          src="..\..\assets\image\值班表-发送邮件-icon.png"
          class="icon-mail"
        />
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%; height: 123px">
      <el-table-column prop="addrName" label="流水线" align="left">
      </el-table-column>
      <el-table-column prop="rotaName" label="值班人员" align="center">
      </el-table-column>
      <el-table-column
        label="在岗状态
    "
        align="right"
        ><template slot-scope="scope">
          <div v-if="scope.row.status == 1">
            <a-badge status="success" />
          </div>
          <div v-else-if="scope.row.status == 0">
            <a-badge status="error" />
          </div>
          <!-- <div>{{ scope.row.ison }}</div> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="40"
      prev-text="上一页"
      next-text="下一页"
      :hide-on-single-page="true"
      style="margin-top: 10px"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <div id="Pie" class="pie"></div>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      tableData: [],
      pageno: 1,
      ligan: 0,
      zaigan: 0,
    };
  },
  mounted() {
    this.getData();
    // setInterval(() => {
    //   this.getData(); // 修改数据date
    // }, 5000);
  },
  methods: {
    getData() {
      this.$http
        .get("http://szls.chiefdata.net/server/rota/getworkoff", {
          params: {
            pageNo: this.pageno,
            pageSize: 4,
          },
        })
        .then(
          (response) => {
            this.tableData = response.body.obj[2].records;
            this.ligan = response.body.obj[1].rate;
            this.zaigan = response.body.obj[0].rate;
            this.drawPie();
          },
          (response) => {
            console.log("请求失败");
          }
        );
    },
    handleCurrentChange(val) {
      this.pageno = val;
      this.getData();
    },
    drawPie() {
      // 基于准备好的dom，初始化echarts实例
      let Pie1 = this.$echarts.init(document.getElementById("Pie"));
      // 绘制图表
      Pie1.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        title: {
          top: 12,
          left: 10,
          text: "值班在岗率",
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 14,
            color: "#ffffff",
            fontWeight: "normal",
          },
        },
        legend: {
          orient: "vertical",
          icon: "circle",
          right: "10%",
          top: "40%",
          itemGap: 18,
          iteamWidth: 20,
          data: ["在岗", "离岗"],
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 14,
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "值班在岗率",
            type: "pie",
            radius: "65%",
            top: 30,
            right: "30%",
            color: ["#8c4bfa", "#65cff5"],
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
            data: [
              {
                value: this.ligan,
                name: "离岗",
              },
              {
                value: this.zaigan,
                name: "在岗",
              },
            ],
            minShowLabelAngle: 30,
          },
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-table {
  background-color: transparent !important;
}
/deep/.el-table td,
/deep/.el-table th.is-leaf {
  border-bottom: 0px solid #ebeef5;
}
/deep/ .el-table th {
  color: #ffffff; /* 字体颜色 */
  font-size: 14px;
  background-color: transparent !important; /* 背景透明 */
  border: 0;
  padding: 0px 0;
  height: 24px;
  font-weight: normal;
}
/deep/ .el-table tr,
/deep/.el-table td {
  color: #ffffff;
  font-size: 10px;
  padding: 0px 0;
  background-color: transparent; /* 背景透明 */
  border: 0;
  height: 24px;
}

/deep/ .el-pagination.is-background .el-pager li {
  background-color: transparent;
  border: 1px solid #ffffff;
  font-size: 10px;
  border-radius: 4px;
  min-width: 20px;
  line-height: 18px;
  height: 20px;
}
/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev {
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 15px;
  width: 60px;
  height: 20px;
}
/deep/.el-pagination span:not([class*="suffix"]) {
  font-size: 10px;
  line-height: 18px;
}
/deep/ tbody tr:nth-child(1),
/deep/ tbody tr:nth-child(3),
/deep/ tbody tr:nth-child(5) {
  background-color: #142766;
}
/deep/.el-table::before {
  background-color: transparent;
}
/deep/.el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager li {
  color: #ffffff;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: rgba(256, 256, 256, 0.25) !important;
}
/deep/ .ant-badge-status-success {
  background-color: #65cff5;
}
/deep/ .ant-badge-status-error {
  background-color: #8c4bfa;
}
/deep/ .ant-badge-status-dot {
  width: 10px;
  height: 10px;
}
/deep/.el-table__empty-text {
  line-height: 106px;
}
.zhibanbiao {
  height: 56px;
  margin: 20px 10px;
  border: 1px solid #3c6fd2;
}
.zhibanrenyuan {
  margin-left: 10px;
  float: left;
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 5px;
}
.zhibanrenyuan span {
  margin-left: 20px;
}
.icon-mail {
  margin-right: 10px;
  float: right;
  margin-top: 2px;
}
.pie {
  width: 100%;
  height: 163px;
  margin-top: 20px;
}
</style>
